<template>
  <el-form
    label-position="top"
    :rules="formRules"
    :model="form"
    ref="formDom"
    class="login-form"
  >
    <el-form-item class="login-title"> 登錄您的smoothfinch帳戶 </el-form-item>
    <el-form-item label="郵箱號" prop="email" class="login-item email">
      <el-input
        type="text"
        v-model.trim="form.email"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="密碼" prop="password" class="login-item password">
      <el-input
        type="password"
        v-model.trim="form.password"
        autocomplete="off"
        :show-password="true"
      ></el-input>
      <a class="forget-password" @click="onClickToResetPassword">忘記密碼？</a>
    </el-form-item>
    <el-form-item
      label="谷歌驗證器"
      prop="googleCode"
      class="login-item validate-code"
    >
      <el-input
        type="text"
        v-model.trim="form.googleCode"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item class="login-item login-btn">
      <el-button style="width: 100%" type="primary" @click="onClickSubmitForm" :loading="loading"
        >登錄</el-button
      >
      <div class="register-tip">
        還沒有smoothfinch賬戶?<a @click="onClickToRegister">立即注册</a>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from "vue";
import { useLoginForm } from "@/hooks/login";

const formDom = ref(null);
const { loading,form,formRules,submitForm } = useLoginForm(formDom);

const emit = defineEmits(['formToggle']);
// 跳转密码重置
const onClickToResetPassword = () => {
  emit('formToggle', 'refindPwd');
};
// 跳转注册
const onClickToRegister = () => {
  emit('formToggle','register');
}
// 登录
const onClickSubmitForm = () => {
  submitForm(formDom);
}
</script>


<style lang="scss" scoped>
 .login-form {
    margin-top: 80px;
    :deep(.login-title) {
      .el-form-item__content {
        color: #3D3D3D;
        font-weight: bold;
        font-size: 36px;
        margin-bottom: 43px;
      }
    }

    :deep(.login-item) {
      .el-form-item__label {
        color: #3D3D3D;
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 15px;
      }

      .el-form-item__content {
        width: 460px;

        .el-input__wrapper {
          border-radius: 8px;
          background: #EDEDED;

          .el-input__inner {
            height: 44px;
          }
        }
      }

      &.email {
        margin-bottom: 26px;
      }

      &.password {
        position: relative;
        margin-bottom: 48px;

        .el-form-item__content {
          .el-input__wrapper {
            padding-right: 40px;
            .el-input__suffix {
              position: absolute;
              right: 1vw;
            }
          }
        }

        .eye-icon {
          position: absolute;
          right: 16px;
          font-size: 6px;
          cursor: pointer;
        }

        .forget-password {
          position: absolute;
          right: 0px;
          font-size: 14px;
          color: #3D5DC7;
          bottom: -35px;
          cursor: pointer;
          user-select: none;
        }
      }

      &.validate-code {
        margin-bottom: 75px;
      }

      &.login-btn {
        .el-button {
          width: 460px;
          height: 61px;
          line-height: 61px;
          border-radius: 8px;
          background: #2FC2AF;
          font-size: 24px;
          color: #fff;
          font-weight: bold;
        }

        .register-tip {
          margin-top: 28px;
          color: #B0B0B0;
          font-size: 18px;
          width: 100%;
          text-align: center;
          user-select: none;
          a {
            cursor: pointer;
            color: #3D5DC7;
          }
        }
      }
    }
  }
</style>